<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东倒计时</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			.box {
				width: 160px;
				height: 50px;
				/*border: 1px solid #ccc;*/
				margin: 20px auto;
			}
			.box ul {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			.box ul li {
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #fff;
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>1</li>
				<li>1</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.addEventListener('load',function() {
				//获取每个li
				var lis = document.querySelectorAll('ul li');
				//距离倒计时结束的时间
				var times = +new Date('2020-11-30 2:57:50');
				
				//为避免开始的时候有停顿,先调用一次计时器在再启用定时器
				getReserveTime();
				//设置定时器,每隔一秒钟调用一次
				setInterval(getReserveTime,1000);
				//编写倒计时函数
				function getReserveTime() {
					var dates = +new Date();
					//剩余的秒数
					var reserveTime = (times - dates) / 1000;
					//计算天数
					var d = parseInt(reserveTime / 60 / 60 / 24);
					d = d < 10 ? '0' + d : d;
					//计算小时
					var h = parseInt(reserveTime / 60 / 60 % 24);
					h = h < 10 ? '0' + h : h;
					//将小时填充到小时框里面
					lis[0].innerHTML = h;
					//计算分钟
					var m = parseInt(reserveTime / 60 % 60);
					m = m < 10 ? '0' + m : m;
					//将分钟填充到分钟框里面
					lis[1].innerHTML = m;
					//计算秒数
					var s = parseInt(reserveTime % 60);
					s = s < 10 ? '0' + s : s;
					//将秒数填充到秒数框里面
					lis[2].innerHTML = s;
//					console.log('m:' + m, 's:' + s)
				}
				
				
				
			})
		</script>
	</body>
</html>
